<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    <h1>Hello vue2</h1>
    <h2>{{info}}</h2>
</div>

<script>
    /*
    *  template模板的渲染会覆盖容器中的原始内容
    *   解决方案:
    *        1. 参照vue实例的生命周期
    *        2. 直接将需要渲染的模板写在容器中，vue实例会直接编译容器中的模板语法，原始的内容不会被解析
    *
    * 编程方式:
    *    1. 命令式编程  Hi Vue2
    *    2. 声明式编程  {{info}}  占位   info 变量
    *
    * */
    let vm  = new Vue({
        el:'#app',
        // 提供模板中需要动态渲染的数据  只要data中的数据被改变，则页面中的数据会自动更新  响应式
        data:{
            info:'HI Vue2'
        }
    })

    // 这种挂载方式 可以通过 el配置项替换
    // vm.$mount('#app')

</script>


</body>
</html>